<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条按钮</title>
    <style>
    *{
        margin:0px;
        padding:0px;
}
    button{
        width: 200px;
        height: 80px;
        background:#00bb00;
        color:#fff;
        border-radius:5px;
        font-size:20px;
        cursor:pointer;
        outline:none;
        position:relative;
        border:none;
}
    span{
        position:absolute;
        width: 0%;
        height: 100%;
        background:#009100;
        left:0;
        top:0;
        border-radius:5px;
        opacity:0.3;
}
    </style>
</head>

<body>
    <button onclick ="submitBtn()">
      按钮
      <span></span>
    </button>
    <script>
              var span = document.getElementsByTagName('span')[0];
              function submitBtn(){
                  var i = 1;
                  timmer = setInterval(function(){
                      span.style.width = i*10+'%';
                      console.log(span)
                      if(i ==10){
                          clearInterval(timmer);
                      }
                      i++;
                  },500)
             }
    </script>
</body>
</html>